<template>
	<cl-dialog
		title="新增收款记录"
		width="450px"
		:visible.sync="visible"
		:before-close="beforeClose"
		@closed="close"
		:props="{
			top: '10vh',
			appendToBody: true,
			closeOnClickModal: false
		}"
	>
		<el-form
			:model="formData"
			ref="form"
			label-width="100px"
			label-position="top"
			class="demo-form"
		>
			<el-form-item
				label="客服"
				prop="user_id"
				:rules="[{ required: true, message: '请选择客服' }]"
			>
				<el-select
					clearable
					filterable
					style="width: 100%"
					v-model="formData.user_id"
					placeholder="请选择客服"
				>
					<el-option
						v-for="(item, index) in userList"
						:key="index"
						:label="item.user_name"
						:value="item.user_id"
					/>
				</el-select>
			</el-form-item>
			<el-form-item
				label="金额"
				prop="total_fee"
				:rules="[{ required: true, message: '请输入金额' }]"
			>
				<el-input v-model="formData.total_fee" placeholder="请输入金额" />
			</el-form-item>
			<el-form-item
				label="支付时间"
				prop="pay_time"
				:rules="[{ required: true, message: '请选择时间' }]"
			>
				<el-date-picker
					value-format="yyyy-MM-dd HH:mm"
					style="width: 100%"
					v-model="formData.pay_time"
					type="datetime"
					placeholder="选择时间"
				/>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="close">关闭</el-button>
			<el-button type="primary" @click="submit" :loading="saving">确定</el-button>
		</template>
	</cl-dialog>
</template>

<script>
export default {
	data() {
		return {
			formData: {},
			visible: false,
			saving: false,
			saving: false,
			userList: [],
			biz_id: null
		};
	},
	created() {
		this.biz_id = this.getCurrBiz();
		this.getUserList();
	},
	mounted() {},
	methods: {
		// 员工列表
		async getUserList() {
			let data = await this.$service.user
				.setDeptuserlists({ post: 1, biz_id: this.biz_id })
				.done(() => {
					this.saving = false;
				});

			this.userList = data;
		},
		open() {
			this.formData = {};
			this.visible = true;
		},
		close() {
			this.formData = {};
			this.visible = false;
		},
		beforeClose(done) {
			if (this.saving) return;
			done();
		},
		submit() {
			this.$refs.form.validate(valid => {
				if (valid) {
					this.saving = true;
					let params = this.$TOOL.objCopy(this.formData);
					console.log(params, "params");

					this.$service.deposit.addBill(params).then(() => {
						this.saving = false;
						this.$emit("successed");
						this.close();
					});
				}
			});
		}
	}
};
</script>
<style scoped lang="scss">
.tip_title {
	font-weight: 700;
	display: block;
	padding: 20px 0 20px 0px;
	position: relative;

	&::before {
		position: absolute;
		left: -10px;
		content: "";
		width: 5px;
		height: 20px;
		background-color: #156dff;
	}
}
</style>
